<template>
	<view>
		<u-tabs class="tabs" bg-color="#f4f4f4" active-color="#cb2921" :list="list" bar-width="300" height="100" :is-scroll="false"
			:current="current" @change="change"></u-tabs>
			<view style="height: 100rpx;"></view>
		<view class="content">
			
			<view v-for="(item, index) in (current==0? sh_active:my_active)">
				<view class="list">
					<view class="date">--{{item.date}}--</view>
					<image class="img"  :src="item.img"></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
			
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData(page)"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		name: "activity",
		data() {
			return {
				sh_active: [{//现有活动
						title: "活动名1232323232323232323232",
						img: "https://i0.hdslb.com/bfs/archive/4ef350d780433bc9154da14774ac810945593e96.jpg@380w_240h_100Q_1c.webp",
						date:"2020.3.1"
					},
					{
						title: "活动名2",
						img: "https://i0.hdslb.com/bfs/feed-admin/8fc3cc536f059af238ac7c1dd07969c097dfa37d.png",
						date:"2020.4.1"
					},
					{
						title: "活动名2",
						img: "https://i0.hdslb.com/bfs/feed-admin/8fc3cc536f059af238ac7c1dd07969c097dfa37d.png",
						date:"2020.4.1"
					},
					{
						title: "活动名2",
						img: "https://i0.hdslb.com/bfs/feed-admin/8fc3cc536f059af238ac7c1dd07969c097dfa37d.png",
						date:"2020.4.1"
					},
					{
						title: "活动名2",
						img: "https://i0.hdslb.com/bfs/feed-admin/8fc3cc536f059af238ac7c1dd07969c097dfa37d.png",
						date:"2020.4.1"
					},
					{
						title: "活动名2",
						img: "https://i0.hdslb.com/bfs/feed-admin/8fc3cc536f059af238ac7c1dd07969c097dfa37d.png",
						date:"2020.4.1"
					}
				],
				my_active: [{//我参加的活动
					title: "活动名1",
					img: "https://i0.hdslb.com/bfs/feed-admin/8fc3cc536f059af238ac7c1dd07969c097dfa37d.png",
					date:"2020.4.1"
				}],


				list: [{
					name: '学校活动'
				}, {
					name: '我参加的活动'
				}],
				current: 0,
				loadStatus: 'loadmore',
				size: 5,
				page:1,
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			onReachBottom: function() { //当划到最底部的时候触发事件
				console.log("我是有底线的人");
				let that = this;
				console.log("onReachBottom", that.loadStatus);
				that.page += 1;
				if (that.loadStatus == 'loadmore') {
					that.loadStatus = 'loading';
					setTimeout(() => {
						that.addRandomData(that.page);
						that.loadStatus = 'loadmore';
					}, 1000);
				}
			},
			addRandomData(page) {
				
			}
		}
	}
</script>

<style>
	.tabs{
		width: 100%;
		position: fixed;
	}
	.content {
		width: 100%;
		height: 100%;
		padding: 10rpx 14rpx;
		background: #f0f0f0;
	}

	.list {
		margin-bottom: 20rpx;
		width: 100%;
		background: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.list:active {
		background: #f3f3f3;
	}
.date{
	margin-top: -2rpx;
	width: 100%;
	text-align: center;
	font-size: 28rpx;
	color: #787878;
	
	
}
	.br {
		width: 98%;
		height: 4rpx;
		margin: 0 auto;
		background: #dcdcdc;
	}

	.title {
		height: 80rpx;
		line-height: 74rpx;
		padding-left: 20rpx;
		font-size: 42rpx;
	}

	.img {
		width: 100%;
		height: 300rpx;
	}
</style>
